<template>
  <div>
      <h1>Demo2</h1>
      <h1>Vue的基础语法----插值语法及插令</h1>
      <h1>Vue的基础语法----响应式数据</h1>
      <h1>{{ num  }}</h1>
      <h1>{{ str }}</h1>
      <h1>{{ arr }}</h1>
      <h1>{{ obj }}</h1>
      <h1>{{ objArr }}</h1>

      <input type="button" value="修改num的值" v-on:click="fn">
      <!-- <input type="button" value="修改str的值" v-on:click="fn1"> -->
      <input type="button" value="修改str的值" @click="fn1">
      <input type="button" value="修改arr的值" @click="fn2">
      <input type="button" value="修改obj的值" @click="fn3">
      <input type="button" value="修改objArr的值" @click="fn4">
  </div>
</template>

<script setup lang="ts">
//  ref:作用就是可以将任意类型的数据变成响应式数据
//  响应式数据：数据变化 视图自动更新
// v-on:绑定事件  v-on:click绑定点击事件
// v-on的简写方式：@
  import {ref} from 'vue'

  let num:any = ref(100)
  let str:any = ref("好好学习");
  let arr:any = ref(["吃饭","喝","玩"])
  let obj:any =ref({
      name:'张三',
      age:20,
      married:false
  })
  
  let objArr:any = ref([
    {id:1,name:'高世建',age:20},
    {id:2,name:'刘仪伟睡神',age:23},
    {id:3,name:'许东旭',age:28},
    {id:4,name:'张明东',age:20},
    {id:5,name:'王震',age:19},
  ])



  function fn(){
    num.value++;
    console.log(num.value);
  }

  // function fn1(){
  //   str.value = "day day up"
  // }

  //函数的简写
  const fn1 = ()=>{
    str.value = "day day up"
  }

  const fn2 = ()=>{
    arr.value[1] = "欢乐"
  }

  const fn3 = ()=>{
    obj.value.name = "豪杰"
  }

  const fn4 = ()=>{
    objArr.value[0].name = "高世建降级 go work"
  }
</script>

<style scoped>

</style>